<template>
  <div class="mb-home">
    <!-- 导航条 -->
    <div class="mb_nav_barbox">
      <div class="mb_nav_bar">
        <van-image class="logo" width="auto" height="24" :src="require('@/assets/img/logo-white.png')" />
        <van-search v-model="valuesearch" placeholder="请输入" />
        <van-icon class="icon_serve" size="24" name="service-o" />
        <van-icon class="icon_info" size="24" name="chat-o" badge="9" />
        <van-icon class="icon_more" size="24" name="weapp-nav" />
      </div>
    </div>
    <!-- ./ 导航条 end here -->

    <!-- 九宫格-菜单 -->
    <van-grid :column-num="4" :border="false" class="mb_grid_group">
      <van-grid-item icon-prefix="icon" icon="jiaofeizhangdan_active" text="套餐余量" />
      <van-grid-item icon-prefix="icon" icon="chongzhi_active" text="充值缴费" />
      <van-grid-item icon-prefix="icon" icon="taocan" text="账单查询" />
      <van-grid-item icon-prefix="icon" icon="qiandao-m" text="签到活动" />
    </van-grid>
    <!-- ./ 九宫格-菜单 end here -->

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render class="mb_swipe">
      <van-swipe-item v-for="thumb in banners.thumb" :key="imathumbge">
        <img :src="thumb" />
      </van-swipe-item>
    </van-swipe>
    <!-- ./ 轮播图 end here -->

    <!-- 概要信息 -->
    <div class="mb_summary">
      <van-row>
        <van-col span="6">
          <div class="tit"><span>98.20</span><span>GB</span></div>
          <p class="txt">通用剩余流量</p>
        </van-col>
        <van-col span="6">
          <div class="tit"><span>12.98</span><span>元</span></div>
          <p class="txt">话费余额</p>
        </van-col>
        <van-col span="6">
          <div class="tit"><span>300</span><span>分钟</span></div>
          <p class="txt">通话剩余</p>
        </van-col>
        <van-col span="6">
          <div class="tit"><span>129</span><span>分</span></div>
          <p class="txt">积分</p>
        </van-col>
      </van-row>
    </div>
    <!-- ./ 概要信息 ens here-->

    <!-- 九宫格-瓷片区 -->
    <van-grid class="mb_grid_chip" column-num="5" :border="false" clickable>
      <van-grid-item :icon="require('../../assets/img/mb-ic01.png')" text="话费充值" />
      <van-grid-item :icon="require('../../assets/img/mb-ic02.png')" text="流量充值" />
      <van-grid-item :icon="require('../../assets/img/mb-ic03.png')" text="账单查询" />
      <van-grid-item :icon="require('../../assets/img/mb-ic04.png')" text="套餐余量" />
      <van-grid-item :icon="require('../../assets/img/mb-ic05.png')" text="已订业务" />
      <van-grid-item :icon="require('../../assets/img/mb-ic06.png')" text="国漫专区" />
      <van-grid-item :icon="require('../../assets/img/mb-ic07.png')" text="5G专区" />
      <van-grid-item :icon="require('../../assets/img/mb-ic08.png')" text="买手机" />
      <van-grid-item :icon="require('../../assets/img/mb-ic09.png')" text="办业务" />
      <van-grid-item :icon="require('../../assets/img/mb-ic10.png')" text="万能副卡" />
    </van-grid>
    <!-- ./ 九宫格-瓷片区 end here -->

    <!-- 通知 -->
    <div class="mb_notice">
      <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
    </div>
    <!-- ./ 通知 end here -->

    <!-- 广告 -->
    <van-image width="100%" height="auto" :src="require('@/assets/img/mb-b01.png')" />
    <!-- ./ 广告 end here -->

    <!-- 双格（业务推荐） -->
    <div class="mb_business">
      <p class="title" style="color: #117dea;"><i class="iconfont icon-qiyeyewu"></i><span>业务推荐</span></p>
      <div class="mb_hairline"></div>
      <van-row>
        <van-col span="12">
          <div class="left">
            <h3>号卡专区</h3>
            <p>先领先得 包邮到家</p>
          </div>
          <div class="right">
            <img :src="require('@/assets/img/mb-i01.png')">
          </div>
        </van-col>
        <van-col span="12">
          <div class="left">
            <h3>号卡专区</h3>
            <p>先领先得 包邮到家</p>
          </div>
          <div class="right">
            <img :src="require('@/assets/img/mb-i02.png')">
          </div>
        </van-col>
      </van-row>
      <div class="mb_hairline"></div>
      <van-row>
        <van-col span="12">
          <div class="left">
            <h3>号卡专区</h3>
            <p>先领先得 包邮到家</p>
          </div>
          <div class="right">
            <img :src="require('@/assets/img/mb-i03.png')">
          </div>
        </van-col>
        <van-col span="12">
          <div class="left">
            <h3>号卡专区</h3>
            <p>先领先得 包邮到家</p>
          </div>
          <div class="right">
            <img :src="require('@/assets/img/mb-i04.png')">
          </div>
        </van-col>
      </van-row>
      <div class="mb_hairline"></div>
      <router-link class="mb_a" to="home">更多</router-link>
      <div class="mb_hairline"></div>
    </div>
    <!-- ./ 双格（业务推荐） ens here -->

    <!-- 双格（全家享） -->
    <div class="mb_business">
      <p class="title" style="color:#85cf22;"><i class="iconfont icon-qiyeyewu"></i><span>全家享</span></p>
      <div class="mb_hairline"></div>
      <van-row>
        <van-col span="12">
          <div class="left">
            <h3>宽带新装</h3>
            <p>家居必备</p>
          </div>
          <div class="right">
            <img :src="require('@/assets/img/mb-o01.png')">
          </div>
        </van-col>
        <van-col span="12">
          <div class="left">
            <h3>全国亲情网</h3>
            <p>成员多至19人</p>
          </div>
          <div class="right">
            <img :src="require('@/assets/img/mb-o02.png')">
          </div>
        </van-col>
      </van-row>
      <div class="mb_hairline"></div>
    </div>
    <!-- ./ 双格（全家享） ens here -->

    <!-- 轮播图（小） -->
    <div class="mb_swipe_box mb_margin_sm">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="thumb02 in banners02.thumb02" :key="imathumbge">
          <img :src="thumb02" />
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
    <!-- ./ 轮播图（小） end here -->

    <!-- 双格（热门推荐） -->
    <div class="mb_tags mb_margin_sm">
      <van-cell title="热门推荐" value="查看更多" is-link :border="false" />
      <van-row>
        <van-col span="12">
          <div class="insidebox">
            <div class="left">
              <h3>流量专区</h3>
              <p>折扣流量超值优惠</p>
            </div>
            <div class="right">
              <img :src="require('@/assets/img/mb-o01.png')">
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="insidebox">
            <div class="left">
              <h3>充值缴费</h3>
              <p>充值尊享9.98折</p>
            </div>
            <div class="right">
              <img :src="require('@/assets/img/mb-o01.png')">
            </div>
          </div>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="12">
          <div class="insidebox">
            <div class="left">
              <h3>流量专区</h3>
              <p>折扣流量超值优惠</p>
            </div>
            <div class="right">
              <img :src="require('@/assets/img/mb-o01.png')">
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="insidebox">
            <div class="left">
              <h3>充值缴费</h3>
              <p>充值尊享9.98折</p>
            </div>
            <div class="right">
              <img :src="require('@/assets/img/mb-o01.png')">
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- ./ 双格（热门推荐） ens here -->

    <!-- Tabbar 标签栏 -->
    <van-tabbar v-model="active" active-color="#017DFF" inactive-color="#666666">
      <van-tabbar-item icon="wap-home" name="mb-home" replace to="mb-home">首页</van-tabbar-item>
      <van-tabbar-item icon="bars" name="mb-class" replace to="mb-class">分类</van-tabbar-item>
      <van-tabbar-item icon="bookmark" name="mb-equit" replace to="mb-equity">权益</van-tabbar-item>
      <van-tabbar-item icon="manager" name="mb-ours" replace to="mb-ours">我的</van-tabbar-item>
    </van-tabbar>
    <!-- ./ Tabbar 标签栏 end here -->
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const onClickLeft = () => history.back();
    const active = ref('mb-home');
    const valuesearch = ref('');
    return {
      onClickLeft,
      active,
      valuesearch,
    };


  },
  data() {
    return {
      banners: {
        // 轮播图
        thumb: [
          require('../../assets/img/mb-banner.jpg'),
          require('../../assets/img/mb-banner.jpg'),
          require('../../assets/img/mb-banner.jpg'),
          require('../../assets/img/mb-banner.jpg'),
        ],
      },
      banners02: {
        // 轮播图
        thumb02: [
          require('../../assets/img/activity1.png'),
          require('../../assets/img/activity2.png'),
        ],
      },

    };
  },


};

</script>

<style lang="less">
.mb-home {
  padding-top: 46px;
  padding-bottom: 64px;
  background: white;
}

/* 导航栏 */
.mb_nav_barbox {
  position: fixed;
  z-index: 10000;
  top: 0;
  height: 46px;
  width: 100%;
  clear: both;
}

.mb_nav_bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  background-color: #140E2A;

  .van-search {
    background: transparent;
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 106px;
    right: 124px;
    padding: 0;

    .van-search__content {
      border-radius: 17px;

      .van-search__field {
        height: 28px;
      }
    }
  }

  .logo {
    position: absolute;
    top: 11px;
    left: 16px;
    cursor: pointer;
  }

  .icon_serve {
    position: absolute;
    top: 11px;
    right: 88px;
    cursor: pointer;
    color: white;
  }

  .icon_info {
    position: absolute;
    top: 11px;
    right: 52px;
    cursor: pointer;
    color: white;
  }

  .icon_more {
    position: absolute;
    top: 11px;
    right: 16px;
    cursor: pointer;
    color: white;
  }
}

/* ./ 导航栏 end here */

/* 九宫格-菜单 */
.mb_grid_group {
  background-color: #140E2A;

  .van-grid-item__content {
    background-color: transparent;

    .van-icon {
      color: white !important;
    }

    .van-grid-item__icon {
      color: white !important;
      font-style: normal;
    }

    .van-grid-item__text {
      color: white !important;
    }
  }
}

/* ./ 九宫格-菜单 end here */

/* 轮播图 */
.mb_swipe {
  img {
    width: 100%;
    display: block;
  }
}

/* ./ 轮播图 end here */

/* 概要信息 */
.mb_summary {
  margin: 12px var(--van-padding-sm);
  margin-top: 12px;
  margin-bottom: 16px;

  .van-row {
    background: white;
    border-radius: 12px;
    padding: 16px 0 12px 0;
    font-size: 12px;
    box-shadow: rgba(27, 158, 230, 0.2) 0px 6px 12px 3px;

    .tit {
      text-align: center;

      span:first-child {
        font-size: 1.2em;
        font-weight: bold;
        letter-spacing: -1px;
      }

      span:last-child {
        font-size: 0.9em;
        margin-left: 2px;
        letter-spacing: -1px;
      }
    }

    .txt {
      text-align: center;
      font-size: 12px;
      transform: scale(0.9);
      color: var(--van-gray-6);
      margin: 8px auto 0 auto;
    }
  }
}

/* ./ 概要信息 end here */

/* 广告 */
.mb_notice {
  margin: 0 var(--van-padding-sm);
  margin-bottom: 16px;

  .van-notice-bar {
    background: #F6F7FC;
    color: #140E2A;
    border-radius: 8px;
  }
}

/* ./ 广告 end here */

/* 双格 */
.mb_business {
  margin-top: 24px;

  .mb_a {
    color: #140E2A;
    font-size: var(--van-font-size-md);
    line-height: 44px;
    text-align: center;
    display: block;
  }

  .title {
    margin: 0 0 12px 0;
    padding: 0;
    text-align: center;
    font-size: var(--van-font-size-lg);
    font-weight: bold;

    span {
      margin-left: 4px;
    }
  }

  .van-row {
    .van-col {
      padding: 12px 0;
      border-right: #f2f3f5 1px solid;

      .left {
        float: left;
        margin-left: 12px;

        h3 {
          color: #333333;
          font-size: var(--van-font-size-lg);
          margin: 0;
        }

        p {
          color: #999999;
          font-size: var(--van-font-size-sm);
          margin: 0;
        }
      }

      .right {
        float: right;
        width: 44px;
        height: 44px;
        margin-right: 12px;

        img {
          width: 100%;
          height: auto;
        }
      }
    }

    .van-col:last-child {
      border: none;
    }
  }
}

/* ./ 双格 end here */

/* 轮播图（小） */
.mb_swipe_box {
  .van-swipe {
    img {
      width: 100%;
      display: block;
    }

    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
      color: white;
    }
  }

}
/* ./ 轮播图（小） end here */

/* 双格（热门推荐） */
.mb_tags {
  .van-cell {
    padding-left: 0;
    padding-right: 0;

    .van-cell__title {
      span {
        font-weight: bold;
      }
    }
  }

  .van-row {
    margin-top: var(--van-padding-xs);

    .van-col:nth-child(odd) {
      padding-right: var(--van-padding-base);
    }

    .van-col:nth-child(even) {
      padding-left: var(--van-padding-base);
    }

    .van-col {
      .insidebox {
        border: #f2f3f5 1px solid;
        clear: both;
        overflow: hidden;
        padding: var(--van-padding-sm) 0;
        border-radius: var(--van-border-radius-lg);

        .left {
          float: left;
          margin-left: 12px;

          h3 {
            color: #333333;
            font-size: var(--van-font-size-lg);
            margin: 0;
          }

          p {
            color: #999999;
            font-size: var(--van-font-size-sm);
            margin: 0;
          }

        }
      }

      .right {
        float: right;
        width: 44px;
        height: 44px;
        margin-right: 8px;

        img {
          width: 100%;
          height: auto;
        }
      }
    }

  }

  .van-row:first-child {
    margin-top: 0;
  }
}

/* ./ 双格（热门推荐） end here */

/* xxx */

/* ./ xxx end here */
</style>